<template>
    <view class="container">
        <view class="comment-avatar">
            <view class="avatar" :style="`--img: url(${ avatar })`"></view>
        </view>
        <view class="comment-content">
            <view class="comment-name">{{ name }}</view>
            <view class="comment-text">{{ text }}</view>
            <view class="comment-time">{{ time }}</view>
        </view>
    </view>
</template>

<script setup>
// import { base_url } from '../../api/config';

const props = defineProps({
    avatar: String,
    name: String,
    text: String,
    time: String,
});

</script>

<style scoped lang="less">
.container {
    margin: 1vw;
    display: flex;
    gap: 1vw;

    .comment-avatar {
        --size: 8vw;
        width: var(--size);
        
        .avatar {
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background-image: var(--img);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    .comment-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1vw;

        .comment-name {
            font-size: 4.5vw;
            font-weight: 900;
        }

        .comment-text {
            font-size: 4vw;
        }

        .comment-time {
            font-size: 3vw;
            color: #999;
        }
    }
}
</style>